<template>
  <div class="records-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="title">设备点检记录</h2>
        <el-button type="primary" class="add-button" @click="OpenAdd">
          <el-icon><Plus /></el-icon>新增点检
        </el-button>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="search-card">
      <el-form :inline="true" class="search-form">
        <el-form-item label="设备编号">
          <el-input v-model="searchForm.equipmentCode" placeholder="请输入设备编号" clearable>
            <template #prefix>
              <el-icon><Document /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable>
            <template #prefix>
              <el-icon><Box /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="检点人">
          <el-input v-model="searchForm.planName" placeholder="请输入检点人" clearable>
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="search-buttons">
          <el-button type="primary" @click="handleSearch" :loading="loading">
            <el-icon><Search /></el-icon>查询
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <div class="table-card">
      <el-table 
        v-loading="loading"
        :data="tableData" 
        border 
        stripe
        style="width: 100%"
        highlight-current-row
        :header-cell-style="{
          background: '#f5f7fa',
          color: '#606266',
          height: '50px',
          fontWeight: '600'
        }"
      >
        <el-table-column prop="equipmentCode" label="设备编号" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span class="code-text">{{ scope.row.equipmentCode }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="equipmentName" label="设备名称" min-width="150">
          <template #default="scope">
            <el-tag size="small" type="success" effect="plain">
              {{ scope.row.equipmentName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="brand" label="品牌" min-width="120">
          <template #default="scope">
            <el-tag size="small" type="info" effect="plain">
              {{ scope.row.brand }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="specifications" label="规格型号" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span class="spec-text">{{ scope.row.specifications }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="plans" label="计划编码" min-width="120" show-overflow-tooltip>
          <template #default="scope">
            <span class="code-text">{{ scope.row.plans }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="planName" label="检点人" min-width="120">
          <template #default="scope">
            <el-tag size="small" effect="plain" type="warning">
              <el-icon><User /></el-icon>
              {{ scope.row.planName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="planTime" label="检点日期" min-width="150">
          <template #default="scope">
            <el-tag size="small" type="info">{{ scope.row.planTime }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="descs" label="备注" min-width="150" show-overflow-tooltip>
          <template #default="scope">
            <el-tooltip 
              v-if="scope.row.descs"
              :content="scope.row.descs"
              placement="top"
              effect="light"
            >
              <span class="remarks-text">{{ scope.row.descs }}</span>
            </el-tooltip>
            <span v-else class="no-remarks">暂无备注</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <div class="operation-buttons">
              <el-button type="primary" link @click="handleEdit(scope.row)">
                <el-icon><Edit /></el-icon>编辑
              </el-button>
              <el-divider direction="vertical" />
              <el-button type="danger" link @click="handleDelete(scope.row)">
                <el-icon><Delete /></el-icon>删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page.pageIndex"
          v-model:page-size="page.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="page.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          :background="true"
        />
      </div>
    </div>

    <!-- 新增/编辑点检记录弹窗 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="form.id ? '编辑点检记录' : '新增点检记录'"
      width="800px"
      :close-on-click-modal="false"
      destroy-on-close
      class="custom-dialog"
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="custom-header">
          <div :id="titleId" :class="titleClass" class="dialog-title">
            <el-icon class="header-icon"><Box /></el-icon>
            {{ form.id ? '编辑点检记录' : '新增点检记录' }}
          </div>
          <el-button class="close-btn" @click="close">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </template>

      <el-form 
        ref="formRef"
        :model="form" 
        :rules="rules"
        label-width="120px"
        class="custom-form"
        :validate-on-rule-change="false"
      >
        <div class="form-section">
          <div class="section-title">
            <el-icon><Document /></el-icon>
            设备信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备编号" prop="equipmentCode">
                <el-input 
                  v-model="form.equipmentCode" 
                  placeholder="请输入设备编号"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><Document /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备名称" prop="equipmentName">
                <el-input 
                  v-model="form.equipmentName" 
                  placeholder="请输入设备名称"
                  :maxlength="50"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><Box /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="品牌" prop="brand">
                <el-input 
                  v-model="form.brand" 
                  placeholder="请输入品牌"
                  :maxlength="30"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><InfoFilled /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号" prop="specifications">
                <el-input 
                  v-model="form.specifications" 
                  placeholder="请输入规格型号"
                  :maxlength="30"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><Document /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="form-section">
          <div class="section-title">
            <el-icon><InfoFilled /></el-icon>
            点检信息
          </div>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="计划编码" prop="plans">
                <el-input 
                  v-model="form.plans" 
                  placeholder="请输入计划编码"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><Document /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="检点人" prop="planName">
                <el-input 
                  v-model="form.planName" 
                  placeholder="请输入检点人"
                  :maxlength="20"
                  show-word-limit
                >
                  <template #prefix>
                    <el-icon><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="检点日期" prop="planTime">
                <el-date-picker
                  v-model="form.planTime"
                  type="date"
                  placeholder="选择检点日期"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" prop="descs">
            <el-input 
              type="textarea" 
              v-model="form.descs" 
              :rows="3"
              placeholder="请输入备注信息"
              :maxlength="200"
              show-word-limit
            />
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button plain @click="dialogVisible = false">
            <el-icon><Close /></el-icon>取消
          </el-button>
          <el-button type="primary" @click="handleSubmit" :loading="saveLoading">
            <el-icon><Check /></el-icon>{{ form.id ? '保存修改' : '确认新增' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, 
  Refresh, 
  Plus, 
  Edit, 
  Delete, 
  Document, 
  Tickets, 
  User, 
  Box, 
  InfoFilled, 
  Avatar,
  Close,
  Check,
  ArrowRight,
} from '@element-plus/icons-vue'
import http from '@/api/http'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const formRef = ref()

// 加载状态
const loading = ref(false)
const saveLoading = ref(false)

// 查询条件
const searchForm = reactive({
  equipmentCode: '',
  equipmentName: '',
  planName: '',
})

// 分页条件
const page = reactive({
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  totalPage: 0
})

// 表格数据
const tableData = ref([])

// 对话框显示状态
const dialogVisible = ref(false)

// 表单数据
const form = reactive({
  id: 0,
  equipmentCode: '',
  equipmentName: '',
  brand: '',
  specifications: '',
  plans: '',
  planName: '',
  planTime: '',
  descs: ''
})

// 表单校验规则
const rules = {
  equipmentCode: [
    { required: true, message: '请输入设备编号', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  equipmentName: [
    { required: true, message: '请输入设备名称', trigger: 'blur' }
  ],
  brand: [
    { required: true, message: '请输入品牌', trigger: 'blur' }
  ],
  specifications: [
    { required: true, message: '请输入规格型号', trigger: 'blur' }
  ],
  plans: [
    { required: true, message: '请输入计划编码', trigger: 'blur' }
  ],
  planName: [
    { required: true, message: '请输入检点人', trigger: 'blur' }
  ],
  planTime: [
    { required: true, message: '请选择检点日期', trigger: 'change' }
  ]
}

// 获取数据列表
const funShow = async () => {
  try {
    loading.value = true
    const res = await axios.get('http://localhost:9991/api/EquipmentManagement/GetRecordsinspectionsList', {
      params: {
        pageIndex: page.pageIndex,
        pageSize: page.pageSize,
        equipmentCode: searchForm.equipmentCode,
        equipmentName: searchForm.equipmentName,
        planName: searchForm.planName
      }
    })
    tableData.value = res.data.data
    page.totalCount = res.data.totalCount
    page.totalPage = res.data.totalPages
  } catch (error: any) {
    ElMessage.error('获取数据失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 重置搜索
const resetSearch = () => {
  searchForm.equipmentCode = ''
  searchForm.equipmentName = ''
  searchForm.planName = ''
  page.pageIndex = 1
  funShow()
}

// 搜索
const handleSearch = () => {
  page.pageIndex = 1
  funShow()
}

// 打开新增对话框
const OpenAdd = () => {
  form.id = 0
  form.equipmentCode = ''
  form.equipmentName = ''
  form.brand = ''
  form.specifications = ''
  form.plans = ''
  form.planName = ''
  form.planTime = ''
  form.descs = ''
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row: any) => {
  Object.assign(form, row)
  dialogVisible.value = true
}

// 删除
const handleDelete = (row: any) => {
  ElMessageBox.confirm('确认删除该点检记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      loading.value = true
      await http.post('/api/EquipmentManagement/DeleteRecordsinspections', { id: row.id })
      ElMessage.success('删除成功')
      funShow()
    } catch (error: any) {
      ElMessage.error('删除失败：' + error.message)
    } finally {
      loading.value = false
    }
  })
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    saveLoading.value = true
    const api = form.id ? '/api/EquipmentManagement/UpdateRecordsinspections' : '/api/EquipmentManagement/CreateRecordsinspections'
    await http.post(api, form)
    ElMessage.success(form.id ? '编辑成功' : '新增成功')
    dialogVisible.value = false
    funShow()
  } catch (error: any) {
    ElMessage.error((form.id ? '编辑' : '新增') + '失败：' + error.message)
  } finally {
    saveLoading.value = false
  }
}

// 初始化
onMounted(() => {
  funShow()
})

//分页监听
watch(page,() => {
  funShow()
})
</script>

<style lang="scss" scoped>
.records-view {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .page-header {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;

        &::before {
          content: '';
          width: 4px;
          height: 20px;
          background: linear-gradient(to bottom, #409eff, #67c23a);
          border-radius: 2px;
        }
      }

      .add-button {
        padding: 8px 16px;
        font-weight: 500;
        transition: all 0.3s;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px 0 rgba(64, 158, 255, 0.3);
        }

        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }

  .search-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }

    .search-form {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .el-form-item {
        margin-bottom: 0;
        margin-right: 0;
        flex: 1;
        min-width: 280px;

        &.search-buttons {
          min-width: auto;
          display: flex;
          justify-content: flex-end;
          gap: 8px;

          .el-button {
            padding: 8px 20px;
            transition: all 0.3s;

            &:hover {
              transform: translateY(-2px);
            }

            .el-icon {
              margin-right: 4px;
            }
          }
        }

        :deep(.el-form-item__label) {
          font-weight: 500;
        }

        :deep(.el-input__wrapper) {
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s;

          &:hover {
            box-shadow: 0 0 0 1px #409eff inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #409eff inset;
          }
        }

        :deep(.el-input__prefix) {
          margin-right: 8px;
          .el-icon {
            color: #909399;
          }
        }
      }
    }
  }

  .table-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
    }

    :deep(.el-table) {
      border-radius: 4px;
      overflow: hidden;

      .el-table__header {
        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 600;
          height: 50px;
          transition: background-color 0.3s;

          &:hover {
            background-color: #ebeef5;
          }
        }
      }

      .el-table__row {
        td {
          padding: 12px;
          transition: all 0.3s;
        }

        &:hover {
          td {
            background-color: #f5f7fa;
          }
        }
      }
    }

    .code-text {
      font-family: Monaco, Menlo, Consolas, monospace;
      color: #409eff;
      font-weight: 500;
      transition: color 0.3s;

      &:hover {
        color: #66b1ff;
      }
    }

    .spec-text {
      color: #606266;
      font-weight: 500;
    }

    .remarks-text {
      color: #606266;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        color: #409eff;
      }
    }

    .no-remarks {
      color: #909399;
      font-style: italic;
    }

    .operation-buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;

      .el-button {
        padding: 4px 8px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }

        .el-icon {
          margin-right: 4px;
        }
      }

      .el-divider {
        margin: 0;
      }
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;

    :deep(.el-pagination) {
      .el-pagination__total {
        margin-right: 16px;
      }

      .el-pagination__sizes {
        margin-right: 16px;
      }

      button {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }
      }

      .el-pager li {
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
        }

        &.is-active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
}

.custom-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    
    .custom-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0;
      padding: 20px 24px;
      border-bottom: 1px solid #ebeef5;
      background: linear-gradient(to right, #409eff, #67c23a);

      .dialog-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;

        .header-icon {
          font-size: 20px;
        }
      }

      .close-btn {
        padding: 8px;
        background: transparent;
        border: none;
        color: #ffffff;
        transition: all 0.3s;

        &:hover {
          transform: rotate(90deg);
          color: #ffffff;
        }

        .el-icon {
          font-size: 18px;
        }
      }
    }

    .el-dialog__body {
      padding: 24px;
      max-height: calc(90vh - 180px);
      overflow-y: auto;
      
      &::-webkit-scrollbar {
        width: 6px;
      }
      
      &::-webkit-scrollbar-thumb {
        background-color: #dcdfe6;
        border-radius: 3px;
        
        &:hover {
          background-color: #c0c4cc;
        }
      }
    }

    .el-dialog__footer {
      padding: 16px 24px;
      border-top: 1px solid #ebeef5;
      background-color: #f5f7fa;
    }
  }

  .custom-form {
    .form-section {
      margin-bottom: 24px;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 12px;
      transition: all 0.3s ease;
      border: 1px solid #ebeef5;

      &:hover {
        background-color: #f0f2f5;
        transform: translateY(-2px);
        border-color: #dcdfe6;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        padding-left: 12px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4px;
          height: 16px;
          background: linear-gradient(to bottom, #409eff, #67c23a);
          border-radius: 2px;
        }

        .el-icon {
          font-size: 18px;
          color: #409eff;
        }
      }

      :deep(.el-form-item) {
        margin-bottom: 20px;
        
        &:last-child {
          margin-bottom: 0;
        }

        .el-form-item__label {
          font-weight: 500;
          color: #606266;
        }

        .el-input__wrapper,
        .el-textarea__wrapper {
          box-shadow: 0 0 0 1px #dcdfe6 inset;
          transition: all 0.3s;
          border-radius: 6px;

          &:hover {
            box-shadow: 0 0 0 1px #409eff inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #409eff inset;
          }
        }

        .el-textarea__wrapper {
          min-height: 120px;
        }

        .el-date-editor {
          width: 100%;
          border-radius: 6px;
        }
      }

      .el-row {
        margin-bottom: 16px;

        &:last-child {
          margin-bottom: 0;
        }

        .el-col {
          padding: 0 12px;
        }
      }
    }
  }

  .dialog-footer {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .el-button {
      padding: 10px 24px;
      font-weight: 500;
      transition: all 0.3s;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 4px;

      .el-icon {
        font-size: 16px;
      }

      &:hover {
        transform: translateY(-2px);
      }

      &.el-button--primary {
        background: linear-gradient(to right, #409eff, #67c23a);
        border: none;

        &:hover {
          background: linear-gradient(to right, #66b1ff, #85ce61);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
        }
      }
    }
  }
}
</style>
